<template>
  <div class="app-container">
    <!-- 绿洲场景管理 -->
    <!-- <div class="app-container-search" style="padding-bottom: 10px;">
      <el-form size="small" :model="form" :inline="true" label-width="90px">
        <el-form-item label="所属产品">
          <el-select placeholder="请选择" clearable v-model="form.productId">
            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生产厂商">
          <el-select placeholder="请选择" clearable v-model="form.manuId">
            <el-option v-for="item in manufacturerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button style="margin-left: 20px;" size="small" type="primary" icon="el-icon-search"
        @click="getRule">搜索</el-button>
      <el-button size="small" icon="el-icon-refresh">重置</el-button>

    </div> -->

    <!-- <el-row>
      <el-button style="margin: 10px 0 10px;" size="mini" type="primary" @click="dialog_newly = true"
        icon="el-icon-folder-add">新增</el-button>
    </el-row> -->

    <el-divider></el-divider>

    <!-- 表格 -->
    <el-table size="medium" :data="tableData" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
      <el-table-column prop="shopName" label="场景类型" align="center"></el-table-column>
      <el-table-column prop="province" label="省" align="center"></el-table-column>
      <el-table-column prop="city" label="市" align="center"></el-table-column>
      <el-table-column prop="area" label="区" align="center"></el-table-column>
      <el-table-column prop="address" label="街道等详细地址信息" align="center"></el-table-column>
      <el-table-column prop="phone" label="电话" align="center"></el-table-column>
      <el-table-column prop="scenarioName" label="场景名" align="center"></el-table-column>
      <el-table-column prop="" label="自定义列信息" align="center"></el-table-column>
      <!-- <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">正常</span>
          <span v-if="scope.row.status == 1">停用</span>
        </template>
</el-table-column> -->
      <el-table-column prop="handle" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="goTerminal(scope.row)">终端</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-pagination class="pagination" background layout="prev, pager, next" :total="total" :page-size="10"
      @current-change="handleCurrentChange"></el-pagination> -->

    <!-- 添加弹窗 -->
    <el-dialog title="添加规则信息" :visible.sync="dialog_newly">
      <el-form :label-position="labelPosition" label-width="100px" style="margin-left:20%;">
        <el-form-item label="规则名称 :">
          <el-input v-model="formNewRule.name" style="width:60%" placeholder="请输入规则名" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属产品 :">
          <el-select placeholder="请选择" clearable v-model="formNewRule.productId" style="width:60%">
            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生产厂商 :">
          <el-select placeholder="请选择" clearable v-model="formNewRule.manuId" style="width:60%">
            <el-option v-for="item in manufacturerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字 :">
          <el-input v-model="formNewRule.keywords" style="width:60%" placeholder="请输入关键字" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注 :">
          <el-input v-model="formNewRule.remark" style="width:60%" placeholder="请输入备注" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_newly = false">取 消</el-button>
        <el-button type="primary" @click="addNewRule" class="dialogbutton">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog title="修改规则信息" :visible.sync="dialog_change">
      <el-form :label-position="labelPosition" label-width="100px" style="margin-left:20%;">
        <el-form-item label="规则名 :">
          <el-input v-model="formChangeRule.name" style="width:60%" placeholder="请输入规则名" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注 :">
          <el-input v-model="formChangeRule.remark" style="width:60%" placeholder="请输入备注" clearable></el-input>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="formChangeRule.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_change = false">取 消</el-button>
        <el-button type="primary" @click="updateRuleConfirm" class="dialogbutton">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getView, } from '@/api/ViewsManage/index.js'
import { log } from 'util';

export default {
  data() {
    return {
      labelPosition: "left",
      dialog_change: false,
      dialog_newly: false,
      tableData: [],

      form: {
        manuId: "",
        productId: "",
        current: 0,
        field: "",
        order: "",
        pageSize: 10
      },
      formNewRule: {
        name: '',
        manuId: '',
        productId: "",
        keywords: "",
        remark: ''
      },
      formChangeRule: {
        id: "",
        name: '',
        status: '',
        remark: ''
      },
      total: 0,
      productList: [],
      manufacturerList: []
    }
  },
  methods: {
    goTerminal(e) {
      this.$router.push({ name: 'terminalLists', params: e })
    },
    //  修改规则弹窗
    updateRuleDialog(e) {
      this.dialog_change = true
      this.formChangeRule.id = e.id
      this.formChangeRule.name = e.name
      this.formChangeRule.remark = e.remark
      this.formChangeRule.status = e.status.toString()


    },
    //  修改规则确认
    updateRuleConfirm() {
      updateRule(this.formChangeRule).then(res => {
        if (res.data.success == true) {
          this.dialog_change = false
          this.$message({
            message: '修改成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getRule()
            }
          })
        }
      })

    },
    // 添加规则
    addNewRule() {
      addRule(this.formNewRule).then(res => {
        if (res.data.success == true) {
          this.dialog_newly = false
          this.$message({
            message: '添加成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getRule()
            }
          })
        } else {
          this.$message({
            message: res.data.message,
            duration: 1000
          })
        }
      })
    },

    handleCurrentChange(e) {
      //当前页
      this.form.current = e
      this.getRule()
    },
    //  查询场景
    getView() {
      getView(
      ).then(res => {
        if (res.data.success == true) {
          this.tableData = (JSON.parse(res.data.data)).data
          // console.log(res.data.data);
          console.log(JSON.parse(res.data.data));
          // this.total = res.data.data.total
        } else {
          this.tableData = []
          this.$message({
            message: res.data.message,
            duration: 1000
          })
        }
      })
    },

  },
  created() {
    this.getView()
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 10px;
}
</style>
